<template>
	<el-dialog
		title="未设置【下次开放期首日】基金列表"
		:visible.sync="fundComShow"
		width="50%"
		:before-close="cancel"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
	>
		<el-table :data="spliceTable" border style="width: 100%">
			<el-table-column prop="fundCode" label="基金代码" width="180"> </el-table-column>
			<el-table-column prop="fundFullName" label="基金名称"> </el-table-column>
		</el-table>
		<el-pagination
			v-if="fundList.length > 10"
			:current-page="currentPage"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="10"
			background
			layout="sizes, prev, pager, next, jumper,total"
			:total="total"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
		<span slot="footer" class="dialog-footer">
			<el-button size="small" type="primary" @click="cancel">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
export default {
	name: 'FundList',
	props: {
		fundComShow: {
			type: Boolean,
			default: false
		},
		fundList: {
			type: Array,
			default: Array
		},
		comIsShow: {
			type: Function,
			default: Function
		}
	},

	data() {
		return {
			currentPage: 1, // 默认分页
			pageSize: 10, // 默认条数
			total: 1,
			spliceTable: []
		}
	},

	methods: {
		cancel() {
			this.$emit('comIsShow')
		},

		handleSizeChange(val) {
			// 改变条数
			this.pageSize = val
			this.currentPage = 1
			this.spliceFunc()
		},

		handleCurrentChange(val) {
			// 改变页数
			this.currentPage = val
			this.spliceFunc()
		},

		spliceFunc() {
			this.total = this.fundList.length
			const list = []
			this.fundList.forEach((item, index) => {
				if (this.currentPage === 1) {
					if (index < this.currentPage * this.pageSize) {
						list.push(item)
					}
				} else {
					if (index >= (this.currentPage - 1) * this.pageSize && index < this.currentPage * this.pageSize) {
						list.push(item)
					}
				}
			})
			this.spliceTable = list
			this.$forceUpdate(this.spliceTable)
		}
	}
}
</script>
<style lang="scss" scoped >
::v-deep .el-pagination {
	padding: 0;
	text-align: left;
	.el-input {
		margin: 0;
	}
	.el-pagination__total {
		float: right;
		margin-right: 0;
	}
	margin: 16px 0 16px 0;
}
</style>
